<template>
  <div>
    <div class="weui_tab">
      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#fff"
        text-color="#303133"
        active-text-color="#16b0ff">
        <div class="weui_navbar">
          <el-menu-item index="1" class="weui_navbar_item " @click="showRun">正在进行</el-menu-item>
          <el-menu-item index="2" class="weui_navbar_item " @click="showFinished">已完成</el-menu-item>
        </div>
      </el-menu>
    </div>
    <run-mission v-if="Run" :missionList="missionList" class="componentsMargin"></run-mission>
    <finished-mission :missionList="missionList" class="componentsMargin" v-if="Finished"></finished-mission>
  </div>
</template>

<script>
import axios from 'axios/index'
import RunMission from './runMission'
import FinishedMission from './finishedMission'
export default {
  name: 'missionList',
  components: {
    RunMission,
    FinishedMission
  },
  data () {
    return {
      missionList: [],
      activeIndex: '1',
      Run: '',
      Finished: ''
    }
  },
  methods: {
    getMissionManager () {
      // axios.get('/static/testData/gain.json')
      axios.get(this.url + '/mission/manager/' + localStorage.getItem('id'))
        .then(this.getMissionListSucc)
    },
    getMissionOwner () {
      axios.get(this.url + '/mission/owner/' + localStorage.getItem('id'))
        .then(this.getMissionListSucc)
    },
    getMissionLeader () {
      axios.get(this.url + '/mission/leader/' + localStorage.getItem('id'))
        .then(this.getMissionListSucc)
    },
    getMissionList () {
      axios.get(this.url + '/mission/all')
        .then(this.getMissionListSucc)
    },
    getMissionListSucc (res) {
      if (res.status === 200) {
        res = res.data
        let list = this.missionList.concat(res)
        const arr = new Map()
        this.missionList = list.filter((list) => !arr.has(list.id) && arr.set(list.id, 1))
      }
    },
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    showRun () {
      this.Run = true
      this.Finished = false
    },
    showFinished () {
      this.Finished = false
      this.Finished = true
      this.Run = false
    },
    showNew () {
      this.Run = false
      this.Finished = false
    }
  },
  mounted () {
    this.Run = true
    let level = parseInt(localStorage.getItem('level'))
    // let level = this.PI
    if (level === this.PI) this.getMissionManager()
    else if (level === this.PR) {
      this.getMissionManager()
      this.getMissionLeader()
    } else if (level === this.student) this.getMissionOwner()
    else this.getMissionList()
  }
}
</script>

<style lang="stylus" scoped>
  .taskName
    margin-left .3rem
  .right
    float: right
  .iconMargin
    margin-right .3rem
  .textColor
    color #0D0D0D
  .iconColor
    color #88d4ff
  .taskIcon
    color #16b0ff
    margin-right .35rem
  .row
    margin-top .6rem
    margin-left .5rem
    margin-bottom .6rem
  .delIcon
    float right
    margin-right .9rem
  .fuzerenIcon
    margin-right .3rem
    color #88d4ff
  .componentsMargin
    margin-top 55.2px
</style>
